<template>
    <h3>案例：折叠面板</h3>
    <div>
        <div class="title">
            <h4>芙蓉楼送辛渐</h4>
            <span class="btn" @click="fun">
                {{ flag ? '收起' : '展开' }}
            </span>
        </div>
        <div class="container" v-if="flag">
            <p>寒雨连江夜入吴,</p>
            <p>平明送客楚山孤。</p>
            <p>洛阳亲友如相问，</p>
            <p>一片冰心在玉壶。</p>
        </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const flag = ref(false)
const fun = () => {
    flag.value = !flag.value
}
</script>

<style scoped>
h3 {
    text-align: center;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #ccc;
    padding: 0 1em;
}

.title h4 {
    line-height: 2;
    margin: 0;
}

.container {
    border: 1px solid #ccc;
    padding: 0 1em;
}

.btn {
    /* 鼠标改成手的形状 */
    cursor: pointer;
}
</style>